<template>
  <el-autocomplete style="width: 100%;" v-bind="{ ...attr }" :fetch-suggestions="searchOptions" :model-value="props.modelValue" @input="inputHandler" />
</template>

<script>
export default {
  inheritAttrs: false
}
</script>

<script setup>
import { getTeacherByName } from 'api/common'

const props = defineProps({
  modelValue: [String, Number],
  formItem: Object,
  attr: {
    type: Object,
    default: () => {
      return { placeholder: '请输入' }
    }
  }
})
const emit = defineEmits(['update:modelValue'])
const inputHandler = e => {
  emit('update:modelValue', e.split('(')[0])
}

function searchOptions(queryString, cb) {
  if (queryString) {
    getTeacherByName({ name: queryString }).then(res => {
      res.result = res.result.map(item => {
        return {
          value: item.name
        }
      })
      cb(res.result)
    })
  } else {
    cb([])
  }
}

</script>
